<!DOCTYPE html>
<html>
<head>
    <title>取货助手 -- 快件e栈服务平台</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link href="css/normalize.css" type="text/css" rel="stylesheet"/>
    <link href="css/common.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/notice.js" type="text/javascript"></script>
    <script src="js/regexp.js" type="text/javascript"></script>
    <script src="js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="/admin/js/layer-v3.5.1/layer/layer.js"></script>
    <script type="text/javascript">
        $.ajax({
            url: "wxconf.do",
            type: "GET",
            data: "xurl=" + location.href.split('#')[0],
            success: function (data) {
                // data = JSON.parse(data);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appid, // 必填，公众号的唯一标识
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名
                    jsApiList: ['startRecord', 'stopRecord', 'scanQRCode', 'playVoice', 'uploadVoice', 'downloadVoice', 'onVoiceRecordEnd', 'translateVoice'
                        , 'downloadVoice', 'onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
                });
            }, error: function () {

            }
        });

        wx.ready(function () {
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
            $("#scanQRCodeBtn").click(x1);
        });
        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            //alert("扫描错误");
        });

        function x1() {
            wx.scanQRCode({
                needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                success: function (res) {
                    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                    if (result.indexOf('express_') === 0) {
                        var code = result.substring(8);
                        $("#expPickUserId").val(code);
                    } else if (result.indexOf('phone_') === 0) {
                        var phone = result.substring(6);
                        var load = layer.load();
                        $.getJSON("/express/getNotOutExpresses.do", {phone: phone}, function (data) {
                            layer.close(load);
                            layer.msg(data.message);
                            var $content0 = $(".expUserInfoCont");
                            if (data.status === 0) {
                                $content0.html('');
                                for (let i = 0; i < data.data.length; i++) {
                                    $content0.append('<div class="expInfoCont status1" id="expressCode_' + data.data[i].code + '"><table><tr><td>快递公司：</td><td>' + data.data[i].company + '</td></tr><tr><td>快递单号：</td><td>' + data.data[i].number + '</td></tr><tr><td>到件时间：</td><td>' + data.data[i].intime + '</td></tr><tr><td>取件码：</td><td>' + data.data[i].code + '</td></tr></table><div class="btns"><button class="btn-success" onclick="updateStatus(' + data.data[i].code + ')">确认收货</button></div></div>');
                                }
                            } else if (data.status === -1) {
                                $content0.html('');
                                $content0.html('<div class="expUserInfoNull">暂无相关信息</div>');
                            } else if (data.status === -404) {
                                location.assign('/login.html');
                            }
                        });
                    } else if (result.indexOf('msg_') === 0) {
                        // 扫码结果既不是 express_ 开头 也不是 phone_ 开头的时候
                        alert(result.substring(4));
                    } else {
                        layer.msg('二维码内容无法识别', function () {});
                    }

                }
            });
        }
    </script>
    <style>
        .expPickCont {
            padding-bottom: 20px;
        }

        .expPickCont .expPickIcon {
            width: 15%;
            margin: 0 auto;
            text-align: center;
        }

        .expPickCont .expPicTitle {
            text-align: center;
            font-weight: bold;
        }

        .searchInfoBtn {
            width: 90%;
            margin: 0 auto;
            text-align: center;
            line-height: 46px;
            border-radius: 23px;
            background: #1f72ff;
            color: #fff;
            font-weight: bolder;
        }

        .expUserInfoCont {
            width: 90%;
            margin: 20px auto 20px;
            font-size: 14px;
        }

        .expUserInfoNull {
            width: 100%;
            line-height: 150px;
            text-align: center;
            color: #888888;
        }

        .expInfoCont {
            width: 100%;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 10px;
            padding: 30px;
            margin-bottom: 20px;
        }

        .expInfoCont td:nth-of-type(1) {
            text-align: right;
            height: 2em;
            line-height: 2em;
        }

        .expInfoCont > .btns {
            border-top: 1px dashed #666;
            padding-top: 20px;
            text-align: right;
            margin-top: 10px;
        }

        .btn-success {
            padding: 5px 15px;
            color: #fff;
            background: #2F9925;
            border: 1px solid #fff;
            border-radius: 5px;
        }

        .status2 {
            position: relative;
        }

        .status2_bg {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
        }

        .status2_bg > img {
            width: 30%;
            margin: 50px auto 0;
            opacity: 0.5;

        }

        .status1 {
            display: block;
        }

        .status2 {
            display: none;
        }
    </style>
</head>
<body>
<div class="content">
    <div class="headerNav">
        <div class="headerNavTop">
            <div class="headerNavIcon headerNavIconOut"><span></span><span></span></div>
        </div>
        <nav class="headerNavCont"></nav>
    </div>

    <div class="expPickCont">
        <div class="expPickIcon">
            <img src="images/pickexpicon.png" width="100%">
        </div>
        <p class="expPicTitle">确认取货</p>

        <div class="expPickInput">
            <form>
                <input id="PageContext" type="hidden" value="${pageContext.request.contextPath}"/>
                <input id="wxCode" type="hidden" value="${wxCode}"/>
                <div class="userInputCont">
                    <div class="inputTypeCont">
                        <div class="inputTitle">取货码</div>
                        <input type="text" id="expPickUserId" class="commonInputFunc" name="username"
                               placeholder="请输入取货码">
                        <div class="commonFuncBtnScan" id="scanQRCodeBtn"></div>
                    </div>
                </div>
            </form>
            <div class="searchInfoBtn">查找信息</div>
        </div>
    </div>

    <div class="expUserInfoCont"></div>
</div>
<script>
    $(function () {
        var $search = $("#expPickUserId");
        $(".searchInfoBtn").click(function () {
            if ($search.val() === '' || !/^\d{6,}$/.test($search.val())) {
                layer.msg('请输入正确的内容', function () {});
            } else {
                var load = layer.load();
                $.getJSON('/express/getExpressByCode.do', {code: $search.val()}, function (data) {
                    layer.close(load);
                    var $content0 = $(".expUserInfoCont");
                    if (data.status === 0) {
                        layer.msg(data.message);
                        $content0.html('');
                        $content0.append('<div class="expInfoCont status1" id="expressCode_' + data.data.code + '"><table><tr><td>快递公司：</td><td>' + data.data.company + '</td></tr><tr><td>快递单号：</td><td>' + data.data.number + '</td></tr><tr><td>到件时间：</td><td>' + data.data.intime + '</td></tr><tr><td>取件码：</td><td>' + data.data.code + '</td></tr></table><div class="btns"><button class="btn-success" onclick="updateStatus(' + data.data.code + ')">确认收货</button></div></div>');
                    } else if (data.status === -404) {
                        alert(data.message);
                        location.assign('/login.html');
                    } else {
                        layer.msg(data.message);
                        $content0.html('');
                        $content0.html('<div class="expUserInfoNull">暂无相关信息</div>');
                    }
                });
            }
        });
    });
    function updateStatus(code) {
        var load = layer.load();
        $.getJSON("/express/updateStatus.do", {code: code}, function (data) {
            layer.close(load);
            layer.msg(data.message);
            if (data.status === 0) {
                $("#expressCode_" + code).remove();
            } else if (data.status === -404) {
                location.assign('/login.html');
            }
        })
    }
</script>
</body>
</html>